import Taro from "@tarojs/taro";
import React, { useState, useEffect } from "react";
import { View } from "@tarojs/components";
import { AtInput, AtButton, AtToast, AtMessage } from "taro-ui";
import { updateUserInfo } from "./api";
import "taro-ui/dist/style/components/button.scss";
import "taro-ui/dist/style/components/input.scss";
import "taro-ui/dist/style/components/toast.scss";
import "taro-ui/dist/style/components/message.scss";
import css from "./index.module.less";

export default function Index() {
  const [open, setOpen] = useState(false);
  const [taostInfo, setTaostInfo] = useState("");
  const initialState = {
    "avatar": "https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132",
    "concernedNumber": 0,
    "created": "",
    "email": "",
    "fansNumber": 0,
    "id": 0,
    "status": 0,
    "tel": "",
    "title": null,
    "username": "微信用户",
    "uuid": ""
  }
  const [userInfo, setUserInfo] = useState(initialState);
  useEffect(() => {
    Taro.getStorage({
      key: 'userInfo',
      success: function (res) {
        setUserInfo(res.data);
      }
    })
  }, [])
  const handleChangeName = (e) => {
    userInfo.username = e;

  }
  const handleChangeTitle = (e) => {
    userInfo.title = e;
  }
  const handleChangeEmail = (e) => {
    userInfo.email = e;
  }
  const handleChangeTel = (e) => {
    userInfo.tel = e;
  }
  const update = () => {
    if (!userInfo.email.includes("@")) {
      setTaostInfo("邮箱错误");
    } else {
      updateUserInfo(userInfo).then((res) => {
        console.log(res);
        if (res.code === 200) {
          setTaostInfo("修改信息成功");
          // 重新修改用户信息
          Taro.setStorage({
            key:"userInfo",
            data: userInfo
          })
          setOpen(true);
          setTimeout(() => Taro.navigateBack(), 1000); // 修改信息成功后一秒返回
        } else {
          Taro.atMessage({
            'message': res.msg,
            'type': "error",
            'duration': 3000
          })
        }
      })

      console.log(userInfo);
    }


  }

  return (
    <React.Fragment>
      <View className={css.app}>
        <AtMessage />
        <AtToast isOpened={open} text={taostInfo} icon="{icon}"></AtToast>
        <AtInput
            name='username'
            title='昵称'
            type='text'
            placeholder='请输入昵称'
            value={userInfo.username}
            onChange={handleChangeName}
        />
        <AtInput
            name='title'
            title='个性签名'
            type='text'
            placeholder='请输入个性签名'
            value={userInfo.title}
            onChange={handleChangeTitle}
        />
        <AtInput
            name='emial'
            title='邮箱'
            type='emial'
            placeholder='请输入邮箱'
            value={userInfo.email}
            onChange={handleChangeEmail}
        />
        <AtInput
            name='tel'
            title='电话'
            type='tel'
            placeholder='请输入电话号码'
            value={userInfo.tel}
            onChange={handleChangeTel}
        />
        <AtButton onClick={update}>提交</AtButton>

      </View>
    </React.Fragment>
  );
}
